<template>
  <div>
    <!-- 头部 -->
    <hm-header>编辑资料</hm-header>
    <!-- 头像 -->
    <div class="avatar">
      <img :src="$axios.defaults.baseURL + info.head_img" alt />
      <van-uploader
        class="uploader"
        :after-read="afterRead"
        :before-read="beforeRead"
      />
    </div>
    <van-cell-group>
      <van-cell
        title="昵称"
        :value="info.nickname"
        is-link
        @click="showNickname"
      />
      <van-cell title="密码" value="****" is-link />
      <van-cell
        title="性别"
        :value="info.gender === 1 ? '男' : '女'"
        is-link
        @click="showGender"
      />
    </van-cell-group>

    <!-- 昵称弹框 -->
    <van-dialog
      v-model="isShowNickname"
      title="昵称"
      show-cancel-button
      @confirm="confirmNickname"
    >
      <van-field v-model="nickname" placeholder="请输入用户昵称" />
    </van-dialog>

    <!-- 性别弹框 -->
    <van-dialog
      v-model="isShowGender"
      title="性别"
      show-cancel-button
      @confirm="confirmGender"
    >
      <van-radio-group v-model="gender">
        <van-cell-group>
          <van-cell title="男" clickable @click="gender = 1">
            <template #right-icon>
              <van-radio :name="1" />
            </template>
          </van-cell>
          <van-cell title="女" clickable @click="gender = 0">
            <template #right-icon>
              <van-radio :name="0" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      isShowNickname: false,
      // 昵称
      nickname: '',
      isShowGender: false,
      gender: 0
    }
  },
  created() {
    // 获取个人信息
    this.getInfo()
  },
  methods: {
    getInfo() {
      // 发送ajax请求,获取个人信息
      const user_id = localStorage.getItem('user_id')
      const token = localStorage.getItem('token')

      this.$axios
        .get(`/user/${user_id}`, {
          headers: {
            Authorization: token
          }
        })
        .then(res => {
          this.info = res.data.data
          console.log(this.info)
        })
    },
    showNickname() {
      this.isShowNickname = true
      this.nickname = this.info.nickname
    },
    confirmNickname() {
      this.editUser({
        nickname: this.nickname // 是nickname 不是 username
      })
    },
    showGender() {
      this.isShowGender = true
      this.gender = this.info.gender
    },
    confirmGender() {
      this.editUser({
        gender: this.gender
      })
    },
    // 封装修改 资料的方法
    editUser(data) {
      let token = localStorage.getItem('token')
      let user_id = localStorage.getItem('user_id')

      this.$axios
        .post(`/user_update/${user_id}`, data, {
          headers: {
            Authorization: token
          }
        })
        .then(res => {
          console.log('修改结果', res)
          // 1. 重新渲染
          this.getInfo()
          // 2. 给一个成功的提示
          this.$toast.success('修改昵称成功')
        })
    },
    beforeRead(file) {
      if (file.size / 1024 > 5) {
        this.$toast.fail('文件太大了')
        return false
      }

      return true
    },
    afterRead(file) {
      console.log(file)
      let formdata = new FormData()
      formdata.append('file', file.file)

      this.$axios.post('/upload', formdata).then(res => {
        // console.log('结果', res.data.data.url)

        this.editUser({
          head_img: res.data.data.url
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.avatar {
  text-align: center;
  margin: 30px;
  position: relative;
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .uploader {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }
}
</style>
